<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" draggable>
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="80px" @keyup.enter="submitHandle()">
      <el-form-item label="工号" prop="code">
        <el-input v-model="dataForm.code"></el-input>
      </el-form-item>
			<el-form-item label="姓名" prop="name">
				<el-input v-model="dataForm.name"></el-input>
			</el-form-item>
      <el-form-item label="性别" prop="sex">
        <fast-radio-group v-model="dataForm.sex" dict-type="user_gender"></fast-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthTime">
        <el-date-picker
            v-model="dataForm.birthTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="出生日期"
        />
      </el-form-item>
      <el-form-item label="联系地址" prop="address">
        <el-input v-model="dataForm.address"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="dataForm.phone"></el-input>
      </el-form-item>
<!--			<el-form-item label="状态" prop="status">-->
<!--				<fast-radio-group v-model="dataForm.status" dict-type="post_status"></fast-radio-group>-->
<!--			</el-form-item>-->
      <el-form-item label="所属学院" prop="academyId">
        <el-select v-model="dataForm.academyId">
          <el-option v-for="item in DepList" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import FastRadioGroup from "@/components/fast-radio-group/src/fast-radio-group.vue";
import {useDepSelectApi} from "@/api/college/dep";
import {useGetSpeInfoApi, useSpeSubmitApi} from "@/api/college/spe";
import {useTeacherInfoApi, useTeacherSubmitApi} from "@/api/college/teacher";

const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const dataFormRef = ref()
const DepList = ref<{id: string, name: string}[]>([])

const dataForm = reactive({
	id: "",
  code: "",
  academyId: "",
	name: "",
  sex: "",
  phone: "",
  address: "",
  birthTime: ""
})

const init = (id?: string) => {
	visible.value = true
  dataForm.id = ""
  dataFormRef.value?.resetFields()
	// id 存在则为修改
	if (id) {
    getTeacherInfo(id)
	}
  getDep()
}

const getTeacherInfo = (id: string) => {
  useTeacherInfoApi(id).then(res => {
		Object.assign(dataForm, res.data)
	})
}

const dataRules = ref({
	name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  code: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  academyId: [{ required: true, message: '必填项不能为空', trigger: 'change' }],
  sex: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  phone: [{ required: true, message: '必填项不能为空', trigger: 'blur' },
    {required: true, pattern: /^1[3456789]\d{9}$/, message: '请输入11位有效手机号号码', trigger: 'change'}],
  birthTime: [{ required: true, message: '必填项不能为空', trigger: 'change' }],
  address: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
})

function getDep(){
  useDepSelectApi().then(res=>{
    DepList.value = res.data
  })
}

// 表单提交
const submitHandle = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
    useTeacherSubmitApi(dataForm).then(() => {
			ElMessage.success({
				message: '操作成功',
				duration: 500,
				onClose: () => {
					visible.value = false
					emit('refreshDataList')
				}
			})
		})
	})
}

defineExpose({
	init
})
</script>
